import React, {useRef, useState} from "react";
import ReactDOM from "react-dom";
import styled from "@emotion/styled";
import {LeftOutlined, RightOutlined} from "@ant-design/icons";

interface ImageDataProps {
    index: number;
    urls: string[]
}


const ImageShow: React.FC<ImageDataProps> = ({index, urls}) => {

    const [currIndex, setCurrIndex] = useState<number>(index);

    const imgRef = useRef<HTMLImageElement|null>(null);

    const prevImg = () => {
        setCurrIndex(currIndex === 0 ? urls.length - 1 : currIndex - 1)
    }

    const nextImg = () => {
        imgRef.current = null;
        setCurrIndex(currIndex === urls.length - 1 ? 0 : currIndex + 1)
    }

    const closeMask = () => {
        document.body.removeChild<HTMLElement>(document.getElementById("img-mask") as HTMLElement)
    }

    const imgBig = () => {
        let node = imgRef.current as HTMLImageElement;
        node.width = node.width * 1.5;
        node.height = node.height * 1.5
    }

    const imgSmall = () => {
        let node = imgRef.current as HTMLImageElement;
        node.width = node.width * 0.8;
        node.height = node.height * 0.8;
    }


    return <Container>
        <div className="model-mask" />
        <div className="picture-area">
            <ul className="top-tools">
                <li className="tools-item" onClick={() => closeMask()}>关闭</li>
                <li className="tools-item" onClick={() => imgBig()}>放大</li>
                <li className="tools-item" onClick={() => imgSmall()}>缩小</li>
                <li className="tools-item" onClick={() => nextImg()}>下一张</li>
                <li className="tools-item" onClick={() => prevImg()}>上一张</li>
            </ul>
            <div className="img-area">
                <img ref={imgRef} className="img-main" src={urls[currIndex]} alt=""/>
            </div>
            <div className="img-left" onClick={() => prevImg()}><LeftOutlined /></div>
            <div className="img-right" onClick={() => nextImg()}><RightOutlined /></div>
        </div>
    </Container>
}

export const ImageModel = (imgUrls: string[], index: number) => {

    let div = document.createElement('div');
    div.setAttribute("id", "img-mask")
    document.body.appendChild(div);

    return ReactDOM.render(<ImageShow index={index} urls={imgUrls} />, div);

}


const Container = styled.div`
  .model-mask {
      position: fixed;
      inset: 0;
      z-index: 1000;
      height: 100%;
      background-color: #00000073;
  }
  .picture-area {
    z-index: 1080;
    position: absolute;
    inset: 0;
    overflow: hidden;
    .top-tools {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-size: 14px;
      font-variant: tabular-nums;
      line-height: 1.5715;
      font-feature-settings: "tnum";
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      width: 100%;
      color: #ffffffd9;
      list-style: none;
      background: rgba(0,0,0,.1);
      pointer-events: auto;
      .tools-item {
        margin-left: 12px;
        padding: 12px;
        cursor: pointer;
        font-size: 14px;
      }
    }
    .img-left {
      position: absolute;
      top: 50%;
      right: 10px;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      margin-top: -22px;
      color: #ffffffd9;
      background: rgba(0,0,0,.1);
      border-radius: 50%;
      cursor: pointer;
      pointer-events: auto;
      left: 10px;
    }
    .img-right {
      position: absolute;
      top: 50%;
      right: 10px;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      margin-top: -22px;
      color: #ffffffd9;
      background: rgba(0,0,0,.1);
      border-radius: 50%;
      cursor: pointer;
      pointer-events: auto;
    }
    .img-area {
      position: absolute;
      inset: 0;
      transition: transform .3s cubic-bezier(.215,.61,.355,1) 0s;
      text-align: center;
      &:before {
        display: inline-block;
        width: 1px;
        height: 50%;
        margin-right: -1px;
        content: "";
      }
      .img-main {
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
        transform: scale(1);
        cursor: grab;
        transition: transform .3s cubic-bezier(.215,.61,.355,1) 0s;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        pointer-events: auto;
      }
    }
  }
`


